<template>
  <div class="app-container">
    <div class="main-class">
      <el-steps :active="active" simple>
        <el-step title="上传报告" icon="el-icon-edit"></el-step>
        <el-step title="确认报告" icon="el-icon-upload"></el-step>
        <el-step title="操作结果" icon="el-icon-picture"></el-step>
      </el-steps>
      <div class="content">
        <div v-show="active === 1" style="text-align: center">
          <el-form ref="form" :model="form" :rules="rules" style="display: inline-block">
            <el-row>
              <el-col :span="12">
                <el-form-item label="1. 当前健康码" prop="img1" style="height: 201px">
                  <image-upload v-model="form.img1" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="2. 当前行程码" prop="img2" style="height: 201px">
                  <image-upload v-model="form.img2" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="3. 核酸检测报告" prop="img3">
                  <image-upload v-model="form.img3" :limit="1"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="5. 健康状况" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio :label=0><span style="font-weight: normal">正常</span></el-radio>
                <el-radio :label=1><span style="font-weight: normal">异常</span></el-radio>
              </el-radio-group>

            </el-form-item>
            <el-form-item label="5. 电话号码" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入电话号码" clearable />
            </el-form-item>
            <el-checkbox v-model="checked">我承诺以上材料真实有效，否则对产生的任何后果负责</el-checkbox>
          </el-form>
        </div>
        <div v-show="active === 2" style="text-align: center">
          <el-form ref="form" :model="form" :rules="rules" style="display: inline-block">
            <el-row>
              <el-col :span="12">
                <el-form-item label="1. 当前健康码">
                  <image-upload v-model="form.img1" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="2. 当前行程码">
                  <image-upload v-model="form.img2" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="3. 核酸检测报告">
                  <image-upload v-model="form.img3" :limit="1"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="5. 健康状况" prop="type">
              <el-radio-group v-model="form.type" disabled>
                <el-radio :label=0><span style="font-weight: normal">正常</span></el-radio>
                <el-radio :label=1><span style="font-weight: normal">异常</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="5. 电话号码" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" disabled placeholder="请输入电话号码" clearable />
            </el-form-item>
          </el-form>
        </div>
        <div v-show="active === 3">
          <el-result v-if="this.code == 200" icon="success" title="上报成功" subTitle="请根据提示进行操作">
          </el-result>
          <el-result v-else icon="error" title="上报失败" subTitle="请根据提示进行操作">
          </el-result>
        </div>
      </div>
      <div class="group">
        <el-button style="margin-top: 12px;" v-show="active > 1 && active < 3" @click="before">上一步</el-button>
        <el-button style="margin-top: 12px;" :disabled="!checked" v-show="active < 2" type="primary" @click="next">
          下一步
        </el-button>
        <el-button style="margin-top: 12px;" v-show="active === 2" type="primary" @click="submitForm">提交</el-button>
        <el-button style="margin-top: 12px;" v-show="active === 3" type="primary" @click="addTag">查看打卡记录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {  addHealthreport } from "@/api/health/healthreport";

  export default {
    name: "Healthreport",
    dicts: ['health_report_type'],
    data() {
      return {
        active: 1,
        // 遮罩层
        loading: true,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          phoneNumber:'',
          type: 0
        },
        img1: undefined,
        img2: undefined,
        img3: undefined,
        checked: false,
        code: '',
        // 表单校验
        rules: {
          img1: [
            {
              required: true, message: '请上传健康码', trigger: 'blur'
            }
          ],
          img2: [
            {
              required: true, message: '请上传行程码', trigger: 'blur'
            }
          ],
          img3: [
            {
              required: true, message: '请上传核酸报告', trigger: 'blur'
            }
          ],
          phoneNumber: [
            {
              required: true,
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ],
        }
      };
    },

    methods: {
      //查看打卡信息
      addTag() {
        this.$router.push('/healthy/healthreportinfo')
      },
      next() {
        if (this.active < 3) {
          this.active++
          if (this.active === 2) {
            this.$modal.msg("请确认图片，点击图片查看高清大图")
          }
        }
      },
      before() {
        if (this.active > 1) {
          this.active--
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          console.log(valid);
          if (valid) {
              addHealthreport(this.form).then(response => {
                console.log(response)
                this.code = response.code
                this.$modal.msgSuccess("打卡成功");
                this.open = false;
                this.active = 3
              });
          }
        });
      },
    },
    watch: {
      // 如果路由有变化，会再次执行clear方法
      // "$route": "clear",
      $route(to , from){
        this.$router.go(0)
      }
    }

  };
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }
  .avatar {
    width: 110px;
    height: 110px;
    display: block;
  }
  .content {
    margin: 15px auto;
  }
  .el-form-item {
    padding: 5px 25px !important;
    margin-bottom: 10px !important;
  }
  .group{
    text-align: center !important;
  }
</style>
